<template>
	<view class = "catogory">
		<view class="fixed">
			<view class="header">
				<image @tap = "backCatogory" src="../../../assets/images/arr-l.png" mode=""></image>
				<text>{{ ctitle }}</text>
				
			</view>
			<view class="kind">
				<view @click="news" :class ="{active:show==1}">新品</view>
				<view @click="sale"  :class ="{active:show==2}">销量</view>
				<view @click="prices"  :class ="{active:show==3}">价格</view>
				<view @click="select"  :class ="{active:show==4}">筛选</view>
			</view>
		</view>
		
		<view class="kindinfo">
			<view class="kindinfos" v-for = "item in list" :key = "item.id" @tap = "toGoodsinfo(item.id)">
				<image :src="item.cover_img" mode=""></image>
				<text class = "gname">{{ item.gname }}</text>
				<view class="footer">
					<text class = "left">￥{{ item.price_now }}</text>
					<text class = "right">{{ item.origin_city }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../../utils/http.js"
	export default {
		data() {
			return {
				id:"",
				list:[],
				ctitle:"",
				show:'1',
				addTime:'',
				page:{
					start:1,
					limit:10,
					lastPage:false,
				}
			};
		},
	
		onLoad(options){
			console.log(options);
			this.id = options.id;
			this.getproductList();
			uni.startPullDownRefresh();
		},	
		
		onPullDownRefresh() {
			if(!this.lastPage){
				// this.page.start++;
				this.getproductList();
				uni.stopPullDownRefresh();
			}else{
				return
			}
		},
		methods:{
			backCatogory(){
				uni.switchTab({
					url:"../kind"
				})
			},
			toGoodsinfo(val){
				uni.navigateTo({
					url:`/pages/kind/goodsInfo/goodsInfo?id=${val}`
				})
			},
			news() {
				this.show = 1;
				this.getproductList();
			},
			sale() {
				this.show = 2;
				this.getproductList();
			},
			
			prices(){
				this.show = 3;
				this.list.sort(function(a,b){
					return b.price_now - a.price_now;
				})
			},
			select() {
				this.show = 4;
				this.getproductList();
			},
			getproductList() {
				http.get("/api/leju/front/product/list",{
						kindId:this.id,
						...this.page
					}).then(res => {
						console.log(res);
						this.list = res.data.data.list;
						this.ctitle = res.data.kind.ctitle;
						console.log(this.ctitle,"22222");
					})
			}
			
		},
	}
</script>

<style lang="scss">
		page{
			background:wheat;
		}
		.catogory{
			width:750rpx;
			background:wheat;
			padding:0.01rpx;
			.fixed{
				width:100%;
				height: 160rpx;
				position:fixed;
				left:0;
				top:0;
				z-index:999;
			}
			.header{
				width:100%;
				height: 80rpx;
				background: #5D4E49;
				padding:0.1rpx;
				image{
					position:absolute;
					left:33rpx;
					top:28rpx;
					width:24px;
					height: 38rpx;
				}
				text{
					display:block;
					width:120rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align:center;
					font-weight:bolder;
					color:white;
					margin:0 auto;
					margin-top:20rpx;
					font-size:40rpx;
				}
			}
			.kind{
				width:100%;
				height: 80rpx;
				display:flex;
				justify-content: space-around;
				align-items: center;
				background: #5D4E49;
				color:white;
				.active{
					color:red;
					border-bottom:2rpx solid red;
					padding-bottom:25rpx;
					font-size:40rpx;
				}
			}
			.kindinfo{
				width:100%;
				display:flex;
				justify-content: space-evenly;
				align-items: center;
				flex-wrap:wrap;
				margin-top:180rpx;
				.kindinfos{
					width:316rpx;
					height: 416rpx;
					// padding:20rpx;
					margin:10px 0;
					background-color: #FFFFFF;
					border-radius:30rpx;
					image{
						width:316rpx;
						height: 238rpx;
						display:block;
						margin-bottom:20rpx;
						border-radius:30rpx 30rpx 0 0;
					}
					.gname{
						display:block;
						text-align:left;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
						font-weight:bolder;
						margin-bottom:40rpx;
						margin-left:45rpx;
					}
					.footer{
						width:100%;
						display:flex;
						justify-content: space-around;
						align-items: center;
						.left{
							color:#b4282d;
							font-size:26rpx;
						}
						.right{
							font-size: 22rpx;
							color: #3E3E3E;
							letter-spacing: 1.57rpx;
						}
					}
					
				}
			}
		}
</style>
